<!--
 * @Author: syl
 * @Date: 2023-09-22 15:48:31
 * @LastEditors: syl
 * @LastEditTime: 2023-10-08 09:50:23
 * @FilePath: \G6Doemo\g6\src\components\test.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by junlin, All Rights Reserved. 
-->
<template>
  <div>
    <input type="text" @input="input" v-model="inputvalue">
    <button @click="clickTest">点击</button>
    <div>{{ count }}</div>
    <div id="test"></div>
  </div>
</template>

<script>
import G6, { connectedComponent } from "@antv/g6";
export default {
  name: "G6DoemoTest",

  data() {
    return {
      count: 0,
      timer: null,
      inputvalue:''
    };
  },

  mounted() {
    this.init();
  },

  methods: {
    input(){
      if(this.timer){
        // clearTimeout(this.timer)
        return
      }
      this.timer = setTimeout(()=>{
        console.log(this.inputvalue);
        this.timer=null
      },3000)
    },
    clickTest() {
      // this.count = window.screen.width;
      this.count = document.clientWidth;
    },
    fun1(cb, delay = 500) {
      let vm = this;
      console.log(vm.timer);
      if (vm.timer) {
        console.log(vm.timer);
        clearTimeout(vm.timer);
      } else {
        return (function () {
          vm.timer = setTimeout(() => {
            cb.apply(this);
            console.log(vm, 666);
            vm.timer = null;
          }, delay);
        })();
      }
    },
    init() {
      const data = {
        nodes: [
          {
            id: "A",
          },
          {
            id: "B",
          },
          {
            id: "C",
          },
          {
            id: "D",
          },
          {
            id: "E",
          },
          {
            id: "F",
          },
          {
            id: "G",
          },
          {
            id: "H",
          },
        ],
        edges: [
          {
            source: "A",
            target: "B",
          },
          {
            source: "B",
            target: "C",
          },
          {
            source: "A",
            target: "C",
          },
          {
            source: "D",
            target: "A",
          },
          {
            source: "D",
            target: "E",
          },
          {
            source: "E",
            target: "F",
          },
          {
            source: "F",
            target: "D",
          },
          {
            source: "G",
            target: "H",
          },
          {
            source: "H",
            target: "G",
          },
        ],
      };
      const graph = new G6.Graph({
        container: "test",
        width: 500,
        height: 400,
      });
      graph.data(data);
      graph.render();

      // 图中的连通分量
      const components = connectedComponent(data, false);
      components.forEach((component) => {
        console.log(component.map((node) => node.get("id")));
      });
      // 期望输出结果：['A', 'B', 'C', 'D', 'E', 'F'], ['G', 'H']
      // 有向图中的强连通分量
      const components2 = connectedComponent(data, true);
      components2.forEach((component) => {
        console.log(component.map((node) => node.get("id")));
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>